<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="container mx-auto px-4">
      <div class="bg-white rounded-lg shadow-sm p-6">
        <h1 class="text-2xl font-bold text-gray-800 mb-6">开发路由导航</h1>
        
        <div class="space-y-4">
          <div v-for="route in routes" :key="route.path" 
            class="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
              <div>
                <h3 class="text-lg font-medium text-gray-800">
                  {{ route.name || '未命名路由' }}
                </h3>
                <p class="text-gray-500 mt-1">路径: {{ route.path }}</p>
              </div>
              <el-button type="primary" @click="navigateTo(route.path)">
                访问
              </el-button>
            </div>
          </div>
        </div>

        <div class="mt-8 pt-6 border-t border-gray-200">
          <h2 class="text-lg font-semibold text-gray-800 mb-4">API 接口</h2>
          <div class="space-y-4">
            <div class="p-4 bg-gray-50 rounded-lg">
              <h3 class="font-medium text-gray-800">获取用户列表</h3>
              <p class="text-gray-600 mt-1">GET /api/users/list</p>
              <p class="text-gray-500 text-sm mt-2">参数：page, pageSize, name, contact</p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
              <h3 class="font-medium text-gray-800">获取用户详情</h3>
              <p class="text-gray-600 mt-1">GET /api/users/detail/:id</p>
              <p class="text-gray-500 text-sm mt-2">参数：id (路径参数)</p>
            </div>
            <div class="p-4 bg-gray-50 rounded-lg">
              <h3 class="font-medium text-gray-800">删除用户</h3>
              <p class="text-gray-600 mt-1">DELETE /api/users/:id</p>
              <p class="text-gray-500 text-sm mt-2">参数：id (路径参数)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 获取所有路由配置
const routes = [
  { path: '/home', name: '首页' },
  { path: '/signed', name: '报名页面' },
  { path: '/success', name: '报名成功' },
  { path: '/list', name: '用户列表' },
  { path: '/dev', name: '开发导航' }
]

// 路由跳转
const navigateTo = (path) => {
  router.push(path)
}
</script>

<style scoped>
.container {
  max-width: 800px;
}
</style> 